{% extends '../common/base.html' %} {% block body %}


<div class="mt10 ml10 fb bl3 f14 pl10 tl pr10">
    <h3>{{project.system_name}}<small class="ml10">基础路径：{{project.system_url}}</small></h3>
</div>
<hr>

<div class="row">
    <div class="alert alert-info ml15" style="width:97%">
        备注：此页面是项目集合页面，系项目名：
        <!-- {{result[0].system_url}} -->
        <span class="alert-link">{{project.system_name}} </span>，对项目进行查看操作，如果接口有变动，请联系相关人员进行相关操作！
    </div>
    <div class=" col-md-3">
        <div class="alert alert-success">
            <a href="javascript:;" class="alert-link">是否授权</a>
            <div class="mt10">
                <button type="button" class="btn btn-success" @click="autoLoginDialog">请求授权</button>

                <button type="button" class="btn btn-danger" @click="clearAuto">清除授权</button>
            </div>
        </div>
        {% if (result.length)%} 
            <el-menu
            unique-opened="true"
            style="min-height:770px;"
            >
            {% for item in result %}
            <el-submenu  index="'{{item.group_id}}''">
              <template slot="title">
                <!--<i class="el-icon-location"></i>-->
                <span>{{item.group_name}}</span>
              </template>
              {% for child in item.children %}
              <el-menu-item @click="clickMethods('{{child.api_id}}','{{item.group_name}}')" index="'{{child.api_id}}'">{{child.api_name}}</el-menu-item>
              {% endfor %}
            </el-submenu>
            {% endfor %}
           </el-menu>
       
        
        {% else %}

        <div class="alert alert-info" style="width:100%">
            还没有创建相关接口项目！请联系相关人员进行相关操作
        </div>
        {% endif %}
    </div>

    <div class="col-md-9">
        <ol class="breadcrumb">
            <li>
                <a href="javascript:;">{{project.system_name}}</a>
            </li>
            <li v-if="groupName">
                <a href="">${groupName}</a>
            </li>
            <li v-if="groupName">
                ${api_name}
            </li>
        </ol>

        <!-- {% block showForm%}{% endblock %} -->
        <div class="w h mt10 rel" v-if="isShow">
            <!--接口标题-->

            <div class="alert alert-success" style="width:97%">
                接口名称:
                <span class="fs12 ml10" style="font-weight:300;">${api_name}</span>
            </div>


            <div class="alert alert-info" style="width:97%">
                接口介绍:
                <span class="fs12 ml10" style="font-weight:300;">${api_desc}</span>
            </div>

            <div class="alert alert-warning" style="width:97%">
                参数说明
            </div>
            <table class="table table-bordered table-striped" style="width:97%;">
                <thead>
                    <th>参数名称</th>
                    <th>是否必填</th>
                    <th>参数说明</th>
                </thead>
                <tbody>
                    <template v-for="item of api_params">
                        <tr>
                            <td>${item.param_key}</td>
                            <td>${item.param_null}</td>
                            <td>${item.param_desc}</td>
                        </tr>
                    </template>

                </tbody>
            </table>

            <div class="alert alert-info" style="width:97%">
                调用接口
            </div>
            <!--接口URL-->
            <table class="table table-bordered table-striped" style="width:97%;">
                <tr>
                    <td class="w100 pr10 ">
                        <select class="form-control" id="method" v-model="apiType">
                            <option value="GET">GET</option>
                            <option value="POST">POST</option>
                        </select>
                    </td>
                    <td class="pr10">
                        <div class="input-group">
                            <input type="text" class="form-control" id="url" v-model="api_method" readonly placeholder="Enter request URL">
                            <span class="input-group-addon cursor btn-main" @click="sendAjaxApi">
                                <i class="glyphicon glyphicon-search"></i> Send</span>
                        </div>
                    </td>
                    <td class="w200 pr10 ">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" v-model="checked"> 是否需要JWT加密
                            </label>
                        </div>
                    </td>
                </tr>
            </table>

            <!--参数-->

            <div class="alert alert-info mt10" style="width:97%">
                请求参数
            </div>
            <table class="table table-bordered table-striped" style="width:97%;">
                <thead>
                    <tr class="fb">
                        <td class="p5" style="width:30%">
                            Key
                        </td>
                        <td class="p5" colspan="2">
                            Value
                        </td>
                    </tr>
                </thead>
                <tbody>
                    <template v-if="api_params.length" v-for="item of api_params">
                        <tr class="last">
                            <td>
                                <input type="text" class="form-control" v-model="item.param_key" readonly data-stage="key">
                            </td>
                            <td class="pl10">
                                <input type="text" class="form-control" data-stage="value" placeholder="请输入参数值" v-model="item.param_value">
                            </td>
                        </tr>
                    </template>
                    <template v-else>
                        <tr class="last">
                            <td colspan="2" class="tc">
                                无请求参数
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>

            <div class="alert alert-info mt10" style="width:97%">

                <textarea class="form-control mt10" rows="5" id="json-textbox" readonly>${resultJson}</textarea>
            </div>
            <div class="mt10">
                <!-- <textarea  class="form-control"  rows="20" readonly>${resultJson}</textarea> -->

                <div class=" tool-input-div">

                    <p>
                        <a href="javascript:format('#json-textbox', '#json-code-div', '#error-span');" class="btn btn-success">格式化JSON</a>
                    </p>
                </div>
                <div class=" tool-result-div" id="json-code-div">
                </div>
               
            </div>
            <!--参数：end-->

        </div>
        <template v-else>
            <div class="alert alert-warning mt10" style="width:97%">
                请点击左侧菜单进行相关操作!
            </div>
        </template>
    </div>


    <el-dialog title="接口授权" :visible.sync="dialogTableVisible" width="40%">

        <div class=" flex-between-center">
            <button type="button" class="btn btn-success btn-sm" @click="addAutoParams">添加参数</button>
            <button type="button" class="btn btn-danger btn-sm" @click="autoLogin">立即授权</button>
        </div>

        <el-form label-width="80px" class="mt20">
            <el-form-item label="授权方法">
                <el-input v-model="baseUrl" placeholder="接口方法"></el-input>
            </el-form-item>


            <el-form-item label="授权参数">
            <template v-for="(item,index) of autoParamsList">
                <div class="mt10">
                <el-input placeholder="请输入key" v-model="item.auto_key" style="width:45%">
                </el-input>
                <el-input placeholder="请输入value"  v-model="item.auto_value" style="width:45%">
                </el-input>
                <a href="javascript:;">
                        <i class="glyphicon glyphicon-trash" @click="deleteApiParams(index,item)"></i>
                    </a>
                </div>
            </template>
            </el-form-item>
            <el-form-item label="">
            <strong style="color:#f00;">${auto_msg}</strong>
        </el-form-item>
        </el-form>





    </el-dialog>

</div>


    {% endblock %} {% block script %}

    <script src="/public/js/formatJson.js"></script>
    <!-- <script src="/static/js/index_show.js"></script> -->
    <script>
        setTimeout(format('#json-textbox', '#json-code-div', '#error-span'), 1000);
        new Vue({
            el: '#container',
            delimiters: ['${', '}'],
            data() {
                return {
                    autoParamsList: [{
                        auto_key: '',
                        auto_value: '',
                    }],
                    dialogTableVisible: false,
                    auto_msg: '',
                    baseUrl: 'checkuserlogin.action',
                    checked: true,
                    groupName: '',
                    isShow: false,
                    api_path: '',
                    apiType: 'GET',
                    api_id: '',
                    api_params: [],
                    api_name: '',
                    api_method: '',
                    api_desc: '',
                    resultJson: {}
                }
            },
            mounted() {

            },
            methods: {
                // 添加参数
                addAutoParams() {
                    this.autoParamsList.push({
                        auto_key: '',
                        auto_value: '',
                    })
                },
                //添加弹框
                autoLoginDialog() {
                    this.autoParamsList[{
                        auto_key: '',
                        auto_value: '',
                    }]
                    this.dialogTableVisible = true;
                },
                //删除参数
                deleteApiParams(index, item) {
                    console.log(index)
                    this.autoParamsList.splice(index, 1)
                },
                // 授权登录
                autoLogin() {
                    let mapObj = {};

                    console.log(this.autoParamsList)
                    for (let item of this.autoParamsList) {
                        if (item.auto_key !== '' && /^[a-z]/.test(item.auto_key)) {
                           mapObj[item.auto_key] = item.auto_value;
                        }
                    }
                    
                    let param = JSON.stringify(this.checked ? ({
                        encry: JWTSecret.jwt(mapObj)
                    }) : mapObj);
                    mapObj.path = '{{project.system_url}}' + this.baseUrl;
                    mapObj.parmas = param;
                    $.ajax({
                        url: '/index/authApi',
                        type: 'POST',
                        data: mapObj,
                    }).then((json) => {
                        if (json.success) {
                            this.auto_msg = '授权成功';
                            this.dialogTableVisible = false;
                        } else {
                            this.auto_msg = `授权失败，${json.msg}`;
                        }
                    }).catch(function(error) {
                        console.log(error);
                    });
                },

                //清除授权
                clearAuto() {
                    $.ajax({
                        url: '/index/clearAuth',
                        type: 'POST',
                    }).then((json) => {
                        if (json.success) {
                         this.$message({
                             message:'清除授权成功',
                            type:'success'
                         })
                        } 
                    }).catch(function(error) {
                        console.log(error);
                    });
                },
                clickMethods(id, groupName) {
                    this.isShow = true;
                    this.resultJson = {};
                    $.get(`/index/showAction?api_id=${id}`).then((json) => {
                        let res = json.result;
                        if (json.success) {
                            this.api_path = res.api_path;
                            this.api_id = res.api_id;
                            this.api_params = JSON.parse(res.api_params);
                            this.api_name = res.api_name;
                            this.api_method = res.api_method;
                            this.api_desc = res.api_desc;
                            this.groupName = groupName
                        }
                    }).catch(function(error) {
                        console.log(error);
                    });
                },
                //请求第三方接口
                sendAjaxApi() {
                    let paramsObj = this.formartParams();
                    let param = JSON.stringify(this.checked ? ({
                        encry: JWTSecret.jwt(paramsObj.parmas)
                    }) : paramsObj.parmas);
                    paramsObj.path = this.api_path + this.api_method;
                    paramsObj.parmas = param;
                    //  console.log(paramsObj);
                    $.ajax({
                        url: '/index/sendAction',
                        type: this.apiType,
                        //  url: this.api_path + this.api_method,
                        data: paramsObj,
                    }).then((json) => {
                        this.resultJson = json;
                    }).catch(function(error) {
                        console.log(error);
                    });
                },
                formartParams() {
                    let mapObj = {};
                    for (let item of this.api_params) {
                        mapObj[item.param_key] = item.param_value;
                    }
                    return {
                        parmas: mapObj
                    }
                },


            }
        })
    </script>




    {% endblock %}